<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<title>myprofile-我的个人信息</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<!--<link href="css/iconfont.css" rel="stylesheet" />-->
		<!--
        <link href="css/stylemyprofile.css" rel="stylesheet" />
        -->
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			
			#Background {
				width: 100%;
			}
			
			#header {
				position: absolute;
				width: 88%;
				height: 20%;
				z-index: 1;
				left: 6.5%;
				top: 1%;
			}
			
			.mui-icon.mui-icon-personadd,
			.mui-icon.mui-icon-left-nav {
				font-size: 22px;
			}
			
			div#backward {
				position: absolute;
				width: 2.5rem;
				top: .5rem;
				left: 0vw;
			}
			
			div#middle {
				position: absolute;
				width: 70%;
				top: .5rem;
				left: 12vw;
			}
			
			input#search {
				position: absolute;
				z-index: 1;
				width: 17rem;
				top: 50rem;
				left: 3vw;
			}
			
			div#right {
				position: absolute;
				width: 2.5rem;
				top: .2rem;
				left: 82vw;
			}
			
			#chuangzuo {
				position: absolute;
				margin-top: 22%;
				margin-left: 8%;
			}
			
			#guanzhu {
				position: absolute;
				margin-top: 22%;
				margin-left: 39%;
			}
			
			#fensi {
				position: absolute;
				margin-top: 22%;
				margin-left: 66%;
			}
			
			#shouchang {
				position: absolute;
				margin-top: 22%;
				margin-left: 94%;
			}
			
			#gongfen_sum {
				position: absolute;
				font-family: "Microsoft YaHei";
				width: 33%;
				color: #000000;
				margin-top: 60%;
				margin-left: 71%;
			}
			
			#shuoming {
				position: absolute;
				margin-top: 88%;
				margin-left: 23%;
				color: #000000;
			}
			
			#duihuan {
				position: absolute;
				margin-top: 88%;
				margin-left: 62%;
				color: #000000;
			}
			
			#profile {
				position: absolute;
				width: 90%;
				height: 15%;
				z-index: 1;
				left: 5%;
				top: 8%;
			}
			
			#info {
				position: absolute;
				width: 85%;
				height: 55%;
				z-index: 1;
				left: 5%;
				top: 8%;
			}
			
			#headImage {
				position: absolute;
				left: 0vw;
				top: 0vw;
				height: 8vh;
				width: 14vw;
				z-index: 2;
				border-radius: 12vw;
				border: none;
			}
			
			#account {
				position: absolute;
				left: 15vw;
				top: 6vw;
				z-index: 2;
				font-size: 6vw;
			}
			
			#editprofile {
				position: absolute;
				left: 59vw;
				top: 3vw;
				z-index: 99;
				font-size: 6vw;
			}
			
			#general {
				position: absolute;
				z-index: 2;
				left: 0px;
				top: 62.0vh;
				width: 100%;
			}

			#laoyou {
				position: absolute;
				z-index: 2;
				left: 0px;
				top: 84vh;
				width: 100%;
				overflow-x: scroll;
				overflow-y: hidden;
				white-space: nowrap;
				padding: 0 0 0 0 !important;
			}
			
			/*小图标列表 #list-leibiao */
			.list-item {
				width: 20%;
				float: left;
				background-color: #FFFFFF;
			}
			.mui-table-view-cell:after {
				content: none;
			}
			.list-item-a{				
				text-align: center;
			}
			.list-item .list-item-a img {
				width: 3.5rem;
				height: 3.5rem;
				text-align: center;
				min-width: 20px;
			}
			.list-item .list-item-a p {
				text-align: center;
				font-family: "Microsoft YaHei";
				font-size: 1.0rem;
				font-weight: bold;
				color: #848484;
			}
			
			@media (max-height:720px) {
				#shuoming {
					position: absolute;
					margin-top: 86%;
				}
				#duihuan {
					position: absolute;
					margin-top: 86%;
				}
				#general {
					top: 55.8vh;
				}
				.list-item .list-item-a img {
					width: 2.5rem;
					height: 2.5rem;
				}
				.list-item .list-item-a p {
					font-size: 0.8rem;
				}
			}
		</style>
	</head>

	<body>
		<div id="con">
			<img id="Background" src="">
		</div>
		<div id="header">
			<div id="backward" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</div>
			<div id="middle" class="mui-input-row mui-search mui-input-speech search">
				<input type="search" class="mui-input-speech mui-input-clear" placeholder="搜索框">
			</div>
			<div id="right" class="mui-btn-link mui-pull-right">
				<span id="contact" class="mui-icon mui-icon-personadd"></span>
			</div>
		</div>
		<div id="profile">
			<img id="headImage" src="images/user-photo.png" />
			<div id="vip" style="position:absolute; z-index:2;left:17px;top:10px;color:#FFFF00;display:inline-block;">VIP</div>
			<label id="account" class="mui-pull-left"></label>
			<button id="editprofile" class="mui-pull-right mui-btn-link">编辑资料</button>
		</div>
		<div id="info">
			<span id="chuangzuo">0</span>
			<span id="guanzhu">0</span>
			<span id="fensi">0</span>
			<span id="shouchang">0</span>
			<span id="gongfen_sum">工分总计：0</span>
			<span id="shuoming" class="mui-btn-link" style="color: #FF6D00;">积分说明</span>
			<span id="duihuan" class="mui-btn-link" style="color: #FF6D00;">积分兑换</span>
		</div>
		<div id="general">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell list-item">
					<a class="list-item-a" href="#">
						<img class="list-item-img" src="" alt="社区建设" />
						<p>社区建设</p>
					</a>
				</li>
				<li class="mui-table-view-cell list-item">
					<a class="list-item-a" href="#">
						<img class="list-item-img" src="" alt="夜间模式" />
						<p>夜间模式</p>
					</a>
				</li>
				<li class="mui-table-view-cell list-item">
					<a class="list-item-a" href="#">
						<img class="list-item-img" src="" alt="帮助" />
						<p>帮助</p>
					</a>
				</li>
				<li class="mui-table-view-cell list-item">
					<a class="list-item-a" href="#">
						<img class="list-item-img" src="" alt="小管家" />
						<p>小管家</p>
					</a>
				</li>
				<li class="mui-table-view-cell list-item">
					<a class="list-item-a" href="#">
						<img class="list-item-img" src="" alt="设置" />
						<p>设置</p>
					</a>
				</li>
			</ul>
		</div>
		<div id="laoyou" class="scrollbar">
			<img id="laoyou1" src="images/meishi-1.jpeg" />
			<img id="laoyou2" src="images/meishi-2.jpeg" />
			<img id="laoyou3" src="images/meishi-3.jpeg" />
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/app.js"></script>
		<script>
			/*mui.init({
				swipeBack: false //启用右滑关闭功能
			}, false);*/
			mui.init();
			mui.ready(function() {
			});
			//window.addEventListener('show', function() {}, false);
			mui.plusReady(function() {
				//var settings = app.getSettings();
				var account = document.getElementById('account');
				var headImage = document.getElementById('headImage');
				var chuangzuo = document.getElementById('chuangzuo');
				var guanzhu = document.getElementById('guanzhu');
				var fensi = document.getElementById('fensi');
				var shouchang = document.getElementById('shouchang');
				var gongfen_sum = document.getElementById('gongfen_sum');
				var laoyou1 = document.getElementById("laoyou1");
				var laoyou2 = document.getElementById("laoyou2");
				var laoyou3 = document.getElementById("laoyou3");
				var laoyou = document.getElementById("laoyou");
				var viplevel = plus.storage.getItem("vip");
				if (viplevel == null || viplevel == "0") {
					plus.storage.setItem("vip", "0");
					document.getElementById('vip').style.display = "none";
				} else {
					document.getElementById('vip').innerText = "VIP" + viplevel;
					document.getElementById('vip').style.display = "inline-block";
				}

				var system = {};
				system.Linux7 = navigator.platform.indexOf("Linux armv7l") == 0;
				if(system.Linux7) {
					//plus.nativeUI.toast(p);
					laoyou.style.top = 85 + 'vh';
					laoyou1.style.height = 25 + 'vh';
					laoyou1.style.width = 25 + 'vh';
					laoyou2.style.height = 25 + 'vh';
					laoyou2.style.width = 25 + 'vh';
					laoyou3.style.height = 25 + 'vh';
					laoyou3.style.width = 25 + 'vh';
				} else {
					system.Linux = navigator.platform.indexOf("Linux") == 0;
					if(system.Linux) {
						//styleElement.style.marginTop = 29 + 'rem';
						var p = window.screen.availHeight / window.screen.availWidth;
						if(p > 1.8) {
							laoyou.style.top = 75.2 + 'vh';
							laoyou1.style.height = 24 + 'vh';
							laoyou1.style.width = 24 + 'vh';
							laoyou2.style.height = 24 + 'vh';
							laoyou2.style.width = 24 + 'vh';
							laoyou3.style.height = 24 + 'vh';
							laoyou3.style.width = 24 + 'vh';
						} else {
							//gongfen_sum.style.marginTop = 60 + '%';
							laoyou.style.top = 85 + 'vh';
							laoyou1.style.height = 24 + 'vh';
							laoyou1.style.width = 24 + 'vh';
							laoyou2.style.height = 24 + 'vh';
							laoyou2.style.width = 24 + 'vh';
							laoyou3.style.height = 24 + 'vh';
							laoyou3.style.width = 24 + 'vh';
						}
					}
					system.iPhone = navigator.platform.indexOf("iPhone") == 0;
					if(system.iPhone) {
						/*chuangzuo.style.marginTop = 20 + '%';
						guanzhu.style.marginTop = 20 + '%';
						fensi.style.marginTop = 20 + '%';
						shouchang.style.marginTop = 20 + '%';
						gongfen_sum.style.marginTop = 55 + '%';*/
						laoyou.style.top = 85 + 'vh';
						laoyou1.style.height = 24 + 'vh';
						laoyou1.style.width = 24 + 'vh';
						laoyou2.style.height = 24 + 'vh';
						laoyou2.style.width = 24 + 'vh';
						laoyou3.style.height = 24 + 'vh';
						laoyou3.style.width = 24 + 'vh';
					}
					//system.Win = navigator.platform.indexOf("Win") == 0;
				}

				//积分说明
				var shuoming = document.getElementById('shuoming');
				shuoming.addEventListener('tap', function(event) {
					/*clicked("addressbook.html", true, {
						"mid": account
					});*/
				});
				
				//积分兑换
				var duihuan = document.getElementById('duihuan');
				duihuan.addEventListener('tap', function(event) {
					clicked("store.html", true, {
						"mid": account
					});
				});
				
				//我的关注
				var userid = plus.storage.getItem("userid");
				/*$.ajax({
					type: "post",
					datatype: 'JSON',
					url: "http://172.20.10.4:8080/api/user/getUser",
					data: "id=" + userid,
					async: true,
					success: function(data) {
						//console.log(data);
						var dataTemp = data.object;
						//console.log(dataTemp)
						guanzhu.innerText = dataTemp;
					},
					error: function(data) {
						//alert("error");
						guanzhu.innerText = "0";
					}
				});*/
				//获得老友信息
				/*$.ajax({
					type: "get",
					datatype: 'JSON',
					url: "http://172.20.10.4:8080/api/content/noteMsg",
					async: true,
					success: function(data) {
						//console.log(data);
						var dataTemp = data.object;
						//console.log(dataTemp)
						laoyou1.src = dataTemp;
					},
					error: function(data) {
						//alert("error");
						laoyou1.src = "";
					}
				});*/

				account.innerText = plus.storage.getItem("name");
				headImage.src = plus.storage.getItem("headimgurl");

				//联系人
				var contactButton = document.getElementById('contact');
				contactButton.addEventListener('tap', function(event) {
					clicked("addressbook.html", true, {
						"mid": account
					});
				});
				
				//编辑个人资料
				var editprofileLink = document.getElementById('editprofile');
				editprofileLink.addEventListener('tap', function(event) {
					clicked("editprofile.html", true, {
						"mid": account
					});
				});
				
				//--
				/*$.oldBack = mui.back;
				var backButtonPress = 0;
				$.back = function(event) {
					backButtonPress++;
					if (backButtonPress > 1) {
						plus.runtime.quit();
					} else {
						plus.nativeUI.toast('再按一次退出应用');
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				};*/
			});
			
		</script>
	</body>

</html>